<template lang="html" id="shou">
  <div class="shou">
    <div class="input">
      <span>登陆查看我的等级</span>
      <button type="button" name="button">登陆</button>
    </div>
    <div class="sou">
      <input type="text" name="" value="" placeholder="腹黑王爷">
      <img src="../../static/fang.png" alt="">
      <button type="button" name="button">搜索</button>
    </div>
    <div class="con-tou">
      <span>主编力荐</span>
    </div>
    <div class="xianshu">
      <div class="ne">
        <img src="../../static/x22.png"><br>
        相逢在余生
      </div>
      <div class="ne">
        <img src="../../static/x23.png"><br>
        农女青枣
      </div>
      <div class="ne">
        <img src="../../static/x24.png"><br>
        毒宠小狂后
      </div>
    </div>
    <div class="con-tou">
      <span>总裁豪门</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x25.png"><br>
      </div>
      <div class="">
        <h3>帝少宠妻无度</h3>
        <p>现代言情(全本)</p>
        <span>
          一次意外，她怀了可爱的宝宝。因此辜负了深爱多年的未婚夫，从此浪迹天涯，遭受唾
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>现代</span> | 闪婚老公太凶猛</li>
      <li><span>科幻</span> | 以文成神</li>
      <li><span>现代</span> | 请深爱:裴少的私宠娇妻</li>
      <li><span>现代</span> | 婚爱无双:老婆别想逃!</li>
    </ul>
    <div class="con-tou">
      <span>灵异其他</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x26.png"><br>
      </div>
      <div class="">
        <h3>我的无心鬼丈夫</h3>
        <p>现代言情(连载中)</p>
        <span>
          为了完成父母的心愿，我迫不得已在姑姑家过着寄人篱下的生活，只是我刚刚考上大
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>校园</span> | 疼她入骨:大神别追我！</li>
      <li><span>奇缘</span> | 雨露均沾:你好喵星人</li>
      <li><span>现代</span> | 非你不可:大叔，晚上见</li>
      <li><span>耽美</span> | 我的男神:是一个阴阳师</li>
    </ul>
    <div class="con-tou">
      <span>穿越女强</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x27.png"><br>
      </div>
      <div class="">
        <h3>农女种田忙</h3>
        <p>古代言情(连载中)</p>
        <span>
          赶潮流穿越？醉了！穿越到农家？醉了！刚穿越来就被退了婚？醉了！双亲早亡，亲戚
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>古代</span> | 江山为聘:美人谋天下！</li>
      <li><span>古代</span> | 堪做布衣妾:夫君要抱抱</li>
      <li><span>古代</span> | 锦绣夫人:侯府我做主！</li>
      <li><span>古代</span> | 穿越农家女:相公你轻点</li>
    </ul>
    <div class="con-tou">
      <span>青春校园</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x28.png"><br>
      </div>
      <div class="">
        <h3>恶魔少爷别太拽</h3>
        <p>校园文学(连载中)</p>
        <span>
          “白痴猪，你懂不懂什么叫怜香惜玉？！”“铁嘴猫，你也算玉吗？”“哇啊
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>校园</span> | 独家爱:拽丫头休想逃</li>
      <li><span>校园</span> | 校草校霸都爱我:很虐心</li>
      <li><span>校园</span> | 纯纯欲动:大神，别追我</li>
      <li><span>现代</span> | 砰然心动:大叔，晚上见</li>
    </ul>
    <div class="con-tou">
      <span>仙侠幻想</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x29.png"><br>
      </div>
      <div class="">
        <h3>妃常逆袭:傻王枭宠娇妻</h3>
        <p>古代言情(全本)</p>
        <span>
          前生，她是侯府嫡女，宽以待人，处处忍让，却惨遭毒害，受尽耻辱而亡。重生，她
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>古代</span> | 妃常逆袭:傻王枭宠娇妻</li>
      <li><span>古代</span> | 毒女难求:王的嚣张宠妃</li>
      <li><span>古代</span> | 冷王霸宠:邪妃誓不低头</li>
      <li><span>古代</span> | 浴血重生复仇:倾世枭凰</li>
    </ul>
    <div class="sou">
      <input type="text" name="" value="" placeholder="网络卡德，补药步摇德">
      <img src="../../static/fang.png" alt="">
      <button type="button" name="button">搜索</button>
    </div>
    <div class="footer">
      <ul class="u1">
        <li>首页</li>
        <li>书架</li>
        <li>分类</li>
        <li>留言</li>
        <li>充值</li>
        <li>客户端</li>
      </ul>
      <ul class="u2">
        <li>普通版</li>
        <div></div>
        <li><span>触平版</span></li>
      </ul>
      <p><span>看书网</span> wap.kanshu.com</p>
    </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.shou {
    width: 100%;
    .input {
        width: 95%;
        height: 50px;
        line-height: 40px;
        margin: 10px auto;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        background: white;
        button {
            width: 80px;
            background: #E98110;
            color: white;
            border: 1px solid #E98110;
        }
    }
    .sou {
        width: 95%;
        height: 40px;
        margin: 10px auto 20px;
        position: relative;
        display: flex;
        justify-content: space-between;
        border: 1px solid #E98110;
        background: white;
        padding: 0 0 0 10px;
        input {
            outline: medium;
            border-style: none;
            width: 75%;
            height: 35px;
        }
        button {
            width: 25%;
            height: 38px;
            text-align: right;
            padding-right: 15px;
            background: #EEEE;
            border: 1px solid #EEE;
            color: #E98110;
        }
        img {
            position: absolute;
            left: 78%;
        }
    }
    .xianmian {
        width: 95%;
        height: 30px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        line-height: 30px;
        background: white;
        .z1 {
            font-size: 17px;
        }
        .z2 {
            font-size: 12px;
            color: #ccc;
        }
    }
    .xianshu {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding: 10px 0 20px;
        display: flex;
        justify-content: space-around;
        .ne {
            width: 30%;
            text-align: center;
            img {
                width: 80%;
                margin: 0 auto;
            }
        }
    }
    .con-tou {
        width: 95%;
        height: 30px;
        margin: 20px auto 0;
        padding: 0 10px;
        line-height: 30px;
        background: white;
        span {
            font-size: 17px;
        }
    }
    .con {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding: 10px 0 20px;
        display: flex;
        justify-content: space-around;
        .ne {
            width: 30%;
            text-align: center;
            img {
                width: 80%;
                margin: 0 auto;
            }
        }
    }
    .con-di {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding-bottom: 20px;
        li {
            width: 95%;
            margin: 0 auto;
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dashed lightgrey;
            span {
                color: #E98110;
            }
        }
    }
    .content {
        width: 95%;
        padding: 10px;
        margin: 0 auto;
        background: white;
        display: flex;
        justify-content: space-around;
        .ne {
            margin-right: 10px;
        }
        p {
            font-size: 13px;
            color: #706e71;
        }
        span {
            color: #9a9897;
        }
    }
    .footer{
      width: 100%;
      background: #333333;
      color:#CCCCCC;
      .u1{
        width: 80%;
        margin:0 auto;
        height:40px;
        line-height: 40px;
        display: flex;
        justify-content: space-around;
      }
      .u2{
        width: 50%;
        margin:0 auto;
        height:30px;
        display: flex;
        justify-content: space-around;
        div{
          width:1px;
          margin-top:8px;
          height:15px;
          background: #CCC;
        }
        li{
          width: 30%;
          height:30px;
          text-align: center;
          line-height: 30px;
          span{
            color:#E98110;
          }
        }
      }
      p{
        width: 100%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        span{
          color:#E98110;
        }
      }
    }
}
</style>
